<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/首页.css"/>
		<script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<title>奈商城</title>
	</head>
	<body>
		<div class="app">
			<div class="header">
				<span>奈商城</span>
			</div>
			<div class="search">
				<div class="ipt">
					<img src="img/搜索.svg" >
					<span>输入您要搜索的宝贝</span>
				</div>
				<div class="message">
					<img src="img/home-msg.png" class="message">
					<div class="yuan"></div>
				</div>
			</div>
			<div class="banner">
				<div class="swiper">
				    <div class="swiper-wrapper">
				        <div class="swiper-slide"><img src="img/banner2.jpg" ></div>
				        <div class="swiper-slide"><img src="img/banner1.jpg" ></div>
				        <div class="swiper-slide"><img src="img/banner2.jpg" ></div>
				    </div>
				    <div class="swiper-pagination"></div>
				</div>
				<ul class="lis">
					<li>
						<div class="pic">
							<img src="img/home-cat1.png" >
						</div>
						<div class="txt">
							菲茨
						</div>
					</li>
					<li>
						<div class="pic">
							<img src="img/home-cat2.png" >
						</div>
						<div class="txt">
							克奈圃
						</div>
					</li>
					<li>
						<div class="pic">
							<img src="img/home-cat3.png" >
						</div>
						<div class="txt">
							服装
						</div>
					</li>
					<li>
						<div class="pic">
							<img src="img/home-cat4.png" >
						</div>
						<div class="txt">
							其他
						</div>
					</li>
				</ul>
			</div>
			<div class="main">
				<div class="content1">
					<div class="left">
						<div class="xian"></div>
						<div class="yuan"></div>
					</div>
					<div class="tit">
						精选推荐
					</div>
					<div class="right">
						<div class="yuan"></div>
						<div class="xian"></div>
					</div>
				</div>
				<div class="content2">
					<div class="left">
						<div class="pic">
							<img src="img/banner1.jpg" >
						</div>
						<div class="txt">
							<div class="tit">
								莫次有机PWE活性美白洗面奶
							</div>
							<div class="money">
								<span class="xianjia">￥169</span>
								<span class="yuanjia">￥220</span>
							</div>
						</div>
					</div>
					<div class="right">
						<div class="pic">
							<img src="img/banner2.jpg" >
						</div>
						<div class="txt">
							<div class="tit">
								莫次有机PWE活性美白嫩肤露
							</div>
							<div class="money">
								<span class="xianjia">￥189</span>
								<span class="yuanjia">￥220</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="footer">
				<ul class="lis">
					<li>
						<div class="pic">
							<img src="img/首页-选中.svg" alt="">
						</div>
						<div class="txt">
							首页
						</div>
					</li>
					<li>
						<div class="pic">
							<img src="img/购物车.svg" alt="">
						</div>
						<div class="txt">
							购物车
						</div>
					</li>
					<li>
						<div class="pic">
							<img src="img/我的.svg" alt="">
						</div>
						<div class="txt">
							我的
						</div>
					</li>
				</ul>
			</div>
		</div>
		<script>        
			var mySwiper = new Swiper ('.swiper', {
				loop: true, 
				pagination: {
					el: '.swiper-pagination',
				}
			})
		</script>
	</body>
</html>
